<!--  -->
<template>
  <div class="flex flex-column">
    <template v-for="(item,index) in productList">
      <van-swipe-cell :key="index">
        <div class="product-item flex" @click="tapProductItem(item)">
          <img :src="item.picture" alt="">
          <div class="ml-10 flex-1 flex-column flex justify-between">
            <div class="mt-4 ellipsis-line2 product-name1">{{item.goods_name}}</div>
            <div>
              <span class="f-12 color-gray send-code mt-10">库存: {{item.stock}}</span>
              <span class="f-12 color-pink mt-10" v-if="parseInt(item.new_sub_price)">新人立减{{item.new_sub_price}}元</span>
            </div>
            
            <div class="flex mt-28 justify-between aligin-center  f-12">
              <div class="price f-18 color-red">
                 <span class="f-medium">￥{{item.price}}</span>
                <span class="discount-price color-gray" v-if="parseInt(item.offer_price)">￥{{item.offer_price}}</span>
               
              </div>
              <div class="flex aligin-center justify-center color-white buy f-bold" @click.stop="$emit('showProductParams',item)">立即购买</div>
            </div>  
          </div>
          <div class="mask" v-if="!item.is_open" @click.stop></div>
        </div>
        <template slot="right" v-if="isSlider">
          <span class="delete flex justify-center aligin-center f-12">删除</span>
          <span class="share flex justify-center aligin-center f-12">分享</span>
          <span class="shop flex justify-center aligin-center f-12">店铺</span>
        </template>
      </van-swipe-cell>
    </template>
    <div class="no-data" v-if="productList.length==0"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    productList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    isSlider: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    tapProductItem(item) {
      this.$emit("tapProductItem", item);
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin.less"); //引入公共css类
.product-item {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  .label {
    padding: 2px;
    border: 1px solid rgba(191, 191, 191, 1);
    border-radius: 2px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
  }
  img {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 5px;
  }
  .product-name1 {
    margin-bottom: 10px;
    font-size: 12px;
    height: 32px;
    line-height: 16px;
  }
   .send-code{
        margin-right: 6px;
        padding: 4px 4px;
        border-radius: 5px;
        font-size: 10px;
        border:1px solid rgba(248, 89, 127, 1);
        line-height: 12px;
        color:rgba(248,89,127,1);
  }
  .color-pink {
    padding: 4px 4px;
    color: #fff;
    font-size: 10px;
    background: #e83028;
    border-radius: 5px;
  }
  .discount-price {
    font-size: 10px;
    text-decoration: line-through;
  }
  .price {
    // font-size: 10px;
  }
  .buy {
    width: 77px;
    height: 28px;
    font-size: 10px;
    border-radius: 15px;
    .bg-1();
  }
  .power {
    display: inline-block;
    width: 8px;
    height: 14px;
    .bg-image("../../assets/imgs/power");
    background-size: 100% 100%;
  }
  .receive-count {
    display: inline-block;
    width: 8px;
    height: 14px;
    .bg-image("../../assets/imgs/receive");
    background-size: 100% 100%;
  }
  .flex-1 {
    flex: 1;
  }
}
.delete {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #e5e5e5;
  color: #fff;
}
.share {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #fe727b;
  color: #fff;
}
.shop {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #e83028;
  color: #fff;
}
.give-power {
  padding: 3px;
  color: #fff;
  font-size: 10px;
  line-height: 10px;
  background: linear-gradient(
    66deg,
    rgba(232, 48, 56, 1),
    rgba(247, 88, 151, 1)
  );
  border-radius: 7px;
}
</style>